import { useState } from "react";
import { connect } from "umi";
import checkedImage from "@/assets/p1/checked.png";
import achievementsImage from "@/assets/p1/achievements.png";

const Achievement = ({ name, isCompleted, handleClick }) => (
	<div
		style={{
			width: "50%",
			display: "flex",
		}}
	>
		<span
			onClick={
				handleClick
					? () => {
							handleClick();
						}
					: () => {}
			}
		>
			{name}
		</span>
		{isCompleted ? (
			<img
				src={checkedImage}
				style={{
					width: "90px",
					marginTop: "-20px",
					marginLeft: "20px",
				}}
				alt="已完成"
			/>
		) : null}
	</div>
);

const AchievementList = ({ achievements, achievementId, handleClick }) => {
	const [isOpen, setIsOpen] = useState(false);

	const handleOpenClick = () => {
		setIsOpen(!isOpen);
	};

	if (!isOpen) {
		return (
			<div>
				<img
					src={achievementsImage}
					style={{
						position: "fixed",
						top: 0,
						left: "80px",
						width: "100px",
						zIndex: "2000",
					}}
					alt="Achievements"
					onClick={handleOpenClick}
				/>
			</div>
		);
	} else {
		return (
			<div
				onClick={handleOpenClick}
				style={{
					position: "fixed",
					top: "10%",
					left: "30%",
					zIndex: "2000",
					backgroundColor: "white",
					padding: "40px",
					display: "flex",
					height: "70%",
					fontSize: "40px",
					width: "40%",
					display: "flex",
					flexDirection: "row",
					flexWrap: "wrap",
					backgroundColor: "#f0ded0",
					borderColor: "#c07f4b",
					borderWidth: "6px",
					borderStyle: "solid",
					borderRadius: "5px",
				}}
			>
				<img
					src={achievementsImage}
					alt="成就"
					style={{ 
						width: "14%",
						height: "16%",
						marginLeft: "16%",
					}}
				/>
				<div
					style={{
						fontSize: "55px",
						paddingTop: "10px",
						marginLeft: "5%",
					}}
				>
					成就收集
				</div>

				{achievements.map(achievement => (
					<Achievement
						key={achievement.id}
						{...achievement}
						handleClick={
							achievement.id == achievementId && handleClick
						}
					/>
				))}
			</div>
		);
	}
};

export default connect(({ achievement }) => ({
	achievements: achievement.achievements,
}))(AchievementList);
